<template>
  <div class="man_note">
    <div class="title">
      <div>管理歌手</div>
    </div>

    <!-- 核心内容区 -->
    <br>

    <el-table :data="all_users.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
      style="width: 100%; max-height: 700px; overflow: scroll;" @selection-change="handleSelectionChange"
      class="table_scrollbar">

      <!-- 多选功能 -->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <!-- 基本内容 -->
      <!-- user_name -->
      <el-table-column prop="nickName" label="歌手名" width="150">
      </el-table-column>

      <!-- user_signature -->
      <el-table-column prop="signature" label="座右铭" width="150">
        <template v-slot="scope">
          {{ scope.row.signature.slice(0, 10) }}·····
        </template>
      </el-table-column>

      <!-- user_avatar -->
      <el-table-column prop="profile" label="用户头像" width="170">
        <template v-slot="scope">
          <img :src="'http://localhost:9999/images/profiles/' + scope.row.profile" alt=""
            style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>

      <!-- user_role -->
      <el-table-column prop="accountCategory" label="权限" width="120">
        <template v-slot="scope">
          <el-tag type="warning">{{ scope.row.accountCategory }}：歌手</el-tag>
        </template>
      </el-table-column>

      <!-- user_level -->
      <el-table-column prop="lever" label="等级" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.lever }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="backgroundImage" label="背景" width="170">
        <template v-slot="scope">
          <img :src="'http://localhost:9999/images/background_image/' + scope.row.backgroundImage" alt=""
            style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>

      <!-- user_sex -->
      <el-table-column prop="gender" label="性别" width="80">
        <template v-slot="scope">
          <el-tag v-if="scope.row.gender == 1">男</el-tag>
          <el-tag v-else>女</el-tag>
        </template>
      </el-table-column>

      <!-- user_career -->
      <el-table-column prop="address" label="城市" width="80">
      </el-table-column>


      <!-- 功能键-操作区 -->
      <el-table-column prop="address" label="操作">
        <template v-slot="scope">
          <el-button type="success" plain @click="open_drawer(scope.row.userId)">修改资料</el-button>
        </template>
      </el-table-column>

    </el-table>
    <br>

    <!-- 分页 -->
    <div style="background-color:white; width: 100%; position: fixed; bottom: 6%;z-index: 999;">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="all_users.length">
        </el-pagination>
      </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer title="修改歌手资料" :visible.sync="drawer" :direction="'rtl'" :before-close="handleClose" append-to-body>

      <div style="margin-bottom: 10px; padding-left: 10px; text-align: center">
        <el-input placeholder="请输入内容" v-model="alter_userInfo.nickName">
          <template slot="prepend">昵称</template>
        </el-input>
      </div>

      <!-- <div style="margin-bottom: 10px; padding-left: 10px; text-align: center">
        <el-input placeholder="请输入内容" v-model="alter_userInfo.password">
          <template slot="prepend">密码</template>
        </el-input>
      </div> -->

      <!-- <div style="margin-bottom: 10px; padding-left: 10px; text-align: center">
        <el-input placeholder="请输入内容" v-model="alter_userInfo.fans">
          <template slot="prepend">粉丝</template>
        </el-input>
      </div> -->

      <div style="margin-bottom: 10px; padding-left: 10px; text-align: center">
        <el-input placeholder="请输入内容" v-model="alter_userInfo.address">
          <template slot="prepend">地址</template>
        </el-input>
      </div>

      <div style="margin-bottom: 10px; padding-left: 10px; text-align: center">
        <el-input placeholder="请输入内容" v-model="alter_userInfo.signature" :rules="[{ required: true, message: '请填写内容' }]">
          <template slot="prepend">个性签名</template>
        </el-input>
      </div>

      <div style="margin-bottom: 10px; padding-left: 10px;">
        性别：
        <el-radio v-model="alter_userInfo.gender" label="0">女</el-radio>
        <el-radio v-model="alter_userInfo.gender" label="1">男</el-radio>
      </div>


      <div style="margin-bottom: 10px; padding-left: 10px;">
        虚拟形象：
        <el-input-number v-model="alter_userInfo.avatarId" :min="0" :max="6" label="虚拟形象"></el-input-number>
      </div>

      <div style="margin-bottom: 10px; padding-left: 10px;">
        背景贴图：
        <el-input-number v-model="alter_userInfo.metaUniverseId" :min="0" :max="6" label="背景贴图"></el-input-number>
      </div>

      <div style="margin-bottom: 10px; padding-left: 10px;">
        头像：
        <el-upload action="#" :multiple="false" :show-file-list="false"
           :http-request="upload_profile">
          <img v-if="alter_userInfo.profile" :src="'http://localhost:9999/images/profiles/' + alter_userInfo.profile"
            class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div style="margin-bottom: 10px; padding-left: 10px;">
        背景图片：
        <el-upload action="#" :multiple="false" :show-file-list="false" 
           :http-request="upload_backgroundImage">
          <img v-if="alter_userInfo.backgroundImage"
            :src="'http://localhost:9999/images/background_image/' + alter_userInfo.backgroundImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div style="margin-bottom: 10px; padding-left: 10px;text-align: center;">
        <el-button  type="primary" @click="submit_alter" style="width: 60%;">
          提交
        </el-button>
      </div>
    </el-drawer>


  </div>
</template>

<script>
import { load_singer_user_infoAPI, edit_user_infoAPI, upload_profilesAPI, upload_background_imageAPI } from '@/api/admin';
export default {
  data() {
    return {
      // 所有用户数据
      all_users: [
        {
          "userId": 4826,
          "nickName": "admin",
          "userName": "admin",
          "password": "e10adc3949ba59abbe56e057f20f883e",
          "profile": "http://localhost:9999/images/profiles/1711722631226-头像.png",
          "backgroundImage": "http://localhost:9999/images/background_image/default.jpg",
          "signature": "这个人很神秘，什么也没有留下",
          "gender": 1,
          "address": "银河区地球村",
          "fans": "帅哥彬",
          "listenTime": 2819,
          "lever": 1,
          "createTime": 1710576011000,
          "activationStatus": 1,
          "accountCategory": 0,
          "avatarId": 0,
          "metaUniverseId": 0
        }
      ],
      // 当前页码
      currentPage: 1,
      // 当前选择的每页多少条数据，来自:page-size里面数组选择项变化，触发的handleSizeChange()
      pageSize: 4,
      // 多选
      multipleSelection: [],
      // 控制抽屉显示
      drawer: false,
      // 抽屉修改用户的信息
      alter_userInfo: {
        address: "银河区地球村",
        avatarId: 0,
        metaUniverseId: 0,
        backgroundImage: "default.jpg",
        profile: '1711722631226-头像.png',
        fans: '', // 不可修改
        gender: 1,
        nickName: "昵称",
        password: "123456", // 不可修改
        signature: "这个人很神秘",
        userId: 1, // 不可修改
        userName: "用户名" //不可修改
      }
    }
  },
  mounted() {
    this.getAllUsers();
  },
  methods: {
    // 获取所有歌手信息数据================================
    getAllUsers() {
      load_singer_user_infoAPI().then(res => {
        // 存储所有用户
        this.all_users = res.data
      }).catch(err => { console.log(err); })
    },
    // 分页================================================
    // 修改每页多少条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },

    // 当前页编号
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    // 多选功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },

    // 修改资料=============================================
    // 打开前的操作
    open_drawer(userId) {
      const singer_item = this.all_users.find(item => {
        return userId == item.userId
      })

      // console.log(singer_item)
      this.alter_userInfo.address = singer_item.address
      this.alter_userInfo.avatarId = singer_item.avatarId
      this.alter_userInfo.metaUniverseId = singer_item.metaUniverseId
      this.alter_userInfo.backgroundImage = singer_item.backgroundImage
      this.alter_userInfo.profile = singer_item.profile
      this.alter_userInfo.fans = singer_item.fans
      this.alter_userInfo.gender = singer_item.gender
      this.alter_userInfo.nickName = singer_item.nickName
      this.alter_userInfo.password = singer_item.password
      this.alter_userInfo.signature = singer_item.signature
      this.alter_userInfo.userId = singer_item.userId
      this.alter_userInfo.userName = singer_item.userName
      // console.log(this.alter_userInfo)

      // 打开抽屉
      this.drawer = true
    },
    // 关闭前的操作
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 上传头像
    async upload_profile(file) {
      // 此时可以自行将文件上传至服务器
      let content = file.file;
      let data = new FormData();
      data.append('data', content);
      console.log(data)
      const { imgfile_url } = await upload_profilesAPI(data)
      this.alter_userInfo.profile = imgfile_url.split("/").pop()
      // console.log(imgfile_url)
      // console.log(this.alter_userInfo.profile)
    },

    // 上传背景
    async upload_backgroundImage (file) {
      // 此时可以自行将文件上传至服务器
      let content = file.file;
      let data = new FormData();
      data.append('data', content);
      console.log(data)
      const { imgfile_url } = await upload_background_imageAPI(data)
      this.alter_userInfo.backgroundImage = imgfile_url.split("/").pop()
      // console.log(imgfile_url)
      // console.log(this.alter_userInfo.profile)
    },


    // 提交修改
    async submit_alter () {
      const { data } = await edit_user_infoAPI(this.alter_userInfo)
      console.log(data)
      this.$message("修改歌手资料成功")

      // 本地修改数据展示
      this.all_users.forEach((item,index)=>{
        if (item.userId == data.userId) {
          this.all_users[index] = data
        }
      })

      this.drawer = false
    }
  }
}
</script>

<style lang="less" scoped>
.man_note {
  width: 98%;
  height: 98%;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 10px;
  padding-left: 20px;
  // padding-bottom: 240px;
  overflow: scroll;
}

.man_note::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.title {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  height: 32px;
  font-size: 24px;
  // margin-top: 10px;
  // margin-left: 20px;
  padding-left: 12px;
}

.title::before {
  position: absolute;
  left: 0px;
  width: 5px;
  top: 4px;
  bottom: 4px;
  background-color: rgb(58, 100, 255);
  content: "";
  border-radius: 16px;
}
</style>